<template>
  <div>
    <!-- 查询框 -->
    <div>
      <el-row style="margin-left: 120px">
        <el-col :span="20">
          <el-input
            placeholder="请输入客户名称"
            v-model="keyWord"
            class="input-with-select"
            style="background-color: #fff; width: 75%"
          >
            <el-select
              v-model="select"
              slot="prepend"
              placeholder="请选择条件"
              style="width: 130px"
            >
              <el-option label="未指派" value="0"></el-option>
              <el-option label="正在开发" value="1"></el-option>
              <el-option label="开发成功" value="2"></el-option>
              <el-option label="开发失败" value="3"></el-option>
            </el-select>
            <el-button
              slot="append"
              type="success"
              icon="el-icon-s-open"
              @click="clean()"
              circle=""
            ></el-button>
          </el-input>
          <el-button
            type="primary"
            icon="el-icon-search"
            @click="search()"
            circle=""
          ></el-button>
          <el-button
            type="primary"
            icon="el-icon-circle-plus"
            @click="addSale()"
            round
            >创建销售机会</el-button
          >
        </el-col>
      </el-row>
    </div>

    <!-- 展示列表 -->
    <el-table
      
      ref="multipleTable"
      :data="pageInfo.list"
      tooltip-effect="dark"
      style="width: 90%; margin: 0px auto"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" prop="sale_id">
      </el-table-column>

      <el-table-column prop="sale_remark" label="客户名称" width="120">
      </el-table-column>
      <el-table-column prop="sale_title" label="标题" width="120">
      </el-table-column>

      <el-table-column prop="sale_state" label="状态" width="120">
        <div slot-scope="scope">
          
          <el-tag type="info" v-if="scope.row.sale_state == 0"> 未指派 </el-tag>
          <el-tag  v-else-if="scope.row.sale_state == 1"> 正在开发 </el-tag>
          <el-tag type="success" v-else-if="scope.row.sale_state == 2"> 开发成功 </el-tag>
          <el-tag type="danger" v-else> 开发失败 </el-tag>
          
        </div>
      </el-table-column>
      <el-table-column prop="creat_user.user_name" label="创建人" width="120">
      </el-table-column>
      <el-table-column prop="due_user.user_name" label="指派人" width="120">
      </el-table-column>
      <el-table-column prop="deal_user.user_name" label="处理人" width="120">
      </el-table-column>
      <el-table-column label="操作">
        <div slot-scope="scope">
          <!-- <template v-if="scope.row.sale_state == 0"> -->
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="showSale(scope.row)"
              circle=""
             
            ></el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete-solid"
              @click="handleDelete(scope.row)"
              circle=""
              v-if="scope.row.sale_state == 0  && scope.row.creat_user  && scope.row.creat_user.user_name == user_name"
            ></el-button>

            <el-button
              size="mini"
              type="warning"
              icon="el-icon-edit-outline"
              @click="updSale(scope.row)"
              circle=""
              v-if="scope.row.sale_state == 0  && scope.row.creat_user  && scope.row.creat_user.user_name == user_name"
            ></el-button>

            <el-button
              size="mini"
              icon="el-icon-thumb"
              type="success"
              @click="giveUser(scope.row)"
              round
              v-if="scope.row.sale_state == 0 && role_id == 3 "
            >
              指派
            </el-button>
          <!-- </template> -->
          <!-- <template v-if="scope.row.sale_state == 1">
            <el-button
              size="mini"
              type="primary"
              icon="el-icon-search"
              @click="showSale(scope.row)"
              circle=""
            ></el-button> -->
         <!-- <div v-if="scope.row.deal_user.user_name != null && scope.row.deal_user.user_name == this.user_name ">  </div> -->
            <el-button
              size="mini"
              type="success"
              icon="el-icon-circle-plus"
              @click="addDevp(scope.row)"
              round
              v-if="scope.row.sale_state == 1 &&scope.row.deal_user  && scope.row.deal_user.user_name == user_name "
             >
              制定开发计划
            </el-button>
       
          <!-- </template> -->
        </div>
      </el-table-column>
    </el-table>
    <!-- 增加 -->
    <el-dialog   title="创建销售机会" :visible.sync="adddialogFormVisible">
      <el-form
       ref="addForm" 
        :rules="rules"
        label-width="80px"
        :model="sale"
        
        
      >
        <el-form-item prop="sale_source" label="机会来源">
          <el-input v-model="sale.sale_source"></el-input>
        </el-form-item>
        <el-form-item label="成功率" prop="sale_rate">
          <el-progress
            :percentage="sale.sale_rate"
            :color="customColors"
            status="success"
          ></el-progress>
          <el-input v-model.number="sale.sale_rate"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="sale_remark">
          <el-input v-model="sale.sale_remark"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="sale_title">
          <el-input v-model="sale.sale_title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="sale_content">
          <el-input type="textarea" v-model="sale.sale_content"></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input readonly="readonly" v-model="user_name"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="adddialogFormVisible = false">取 消</el-button>
        <el-button type="primary"  @click="saveSale('addForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--增加结束 -->
    <!-- 编辑 -->
    <el-dialog title="编辑销售机会" :visible.sync="upddialogFormVisible">
      <el-form label-width="80px" :model="sale" ref="updForm" :rules="rules">
        <el-form-item label="机会来源" prop="sale_source">
          <el-input v-model="sale.sale_source"></el-input>
        </el-form-item>
        <el-form-item label="成功率" prop="sale_rate">
          <el-progress
            :percentage="sale.sale_rate"
            :color="customColors"
            status="success"
          ></el-progress>
          <el-input v-model.number="sale.sale_rate"></el-input>
        </el-form-item>
        <el-form-item label="客户名称" prop="sale_remark">
          <el-input v-model="sale.sale_remark"></el-input>
        </el-form-item>
        <el-form-item label="标题" prop="sale_title">
          <el-input v-model="sale.sale_title"></el-input>
        </el-form-item>
        <el-form-item label="描述" prop="sale_content">
          <el-input
            type="textarea"
            v-model="sale.sale_content"
            placeholder="必填"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="upddialogFormVisible = false">取 消</el-button>
        <el-button type="primary"   @click="saveUpdSale('updForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--编辑结束 -->
    <!-- 指派 -->
    <el-dialog title="编辑销售机会" :visible.sync="desdialogFormVisible">
      <el-form label-width="80px" :rules="rules" ref="desForm" :model="sale">
        <el-form-item label="指派给" prop="sale_dealcode">
          <el-select v-model="sale.sale_dealcode" placeholder="指派给">
            <el-option
              v-for="item in userList"
              :key="item.user_code"
              :label="item.user_name"
              :value="item.user_code"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="机会来源">
          <el-input readonly="readonly" v-model="sale.sale_source"></el-input>
        </el-form-item>
        <el-form-item label="成功率">
          <el-progress
            :percentage="sale.sale_rate"
            :color="customColors"
            status="success"
          ></el-progress>
          <el-input readonly="readonly" v-model="sale.sale_rate"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input readonly="readonly" v-model="sale.sale_remark"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input readonly="readonly" v-model="sale.sale_title"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            readonly="readonly"
            type="textarea"
            v-model="sale.sale_content"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="desdialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveDesSale('desForm')">确 定</el-button>
      </div>
    </el-dialog>
    <!--指派结束 -->
    <!-- 展示 -->
    <el-dialog title="展示销售机会" :visible.sync="showdialogFormVisible">
      <el-form label-width="80px" :model="sale">
        <el-form-item label="机会来源">
          <el-input readonly="readonly" v-model="sale.sale_source"></el-input>
        </el-form-item>
        <el-form-item label="成功率">
          <el-progress
            :percentage="sale.sale_rate"
            :color="customColors"
          ></el-progress>
          <el-input readonly="readonly" v-model="sale.sale_rate"></el-input>
        </el-form-item>
        <el-form-item label="客户名称">
          <el-input readonly="readonly" v-model="sale.sale_remark"></el-input>
        </el-form-item>
        <el-form-item label="标题">
          <el-input readonly="readonly" v-model="sale.sale_title"></el-input>
        </el-form-item>
        <el-form-item label="描述">
          <el-input
            readonly="readonly"
            type="textarea"
            v-model="sale.sale_content"
          ></el-input>
        </el-form-item>
        <el-form-item label="创建人">
          <el-input
            readonly="readonly"
            v-model="sale.sale_creatname"
          ></el-input>
        </el-form-item>
        <el-form-item label="指派人">
          <el-input readonly="readonly" v-model="sale.sale_duename"></el-input>
        </el-form-item>
        <el-form-item label="处理人">
          <el-input readonly="readonly" v-model="sale.sale_dealname"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showdialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
    <!--展示结束 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.pageNum"
      :page-sizes="[5, 10, 20, 30]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="pageInfo.total"
    >
    </el-pagination>
  </div>
</template>
<script>
export default {
  data() {
    return {
      // 验证规则
      rules: {
        sale_source: [{ required: true, message: "必填", trigger: "blur" }],
        sale_title: [{ required: true, message: "必填", trigger: "blur" }],
        sale_content: [{ required: true, message: "必填", trigger: "blur" }],
        sale_remark: [{ required: true, message: "必填", trigger: "blur" }],
        sale_dealcode:[{required: true, message: "必选", trigger: "blur"}],
        sale_rate: [
           {
            required: true,
            message: "必填",
            trigger: "blur",
          },
          {
           
            type: 'number',
            min:0,
            max:100,
            message: "成功率在0~100之间",
            trigger: "blur",
          },
         
        ],
      },
      // 展示数据
      pageInfo: {},
      //当前页
      currentPage: 1,
      //每页条目数
      pageSize: 5,
      // 查询条件
      keyWord: "",
      // 当前登陆人姓名创建人
      user_name: "  ",
      // 查询框条件选择
      select: "",
      // 模态框绑定数据
      sale: {
        sale_source: "",
        sale_title: "",
        sale_rate: "",
        sale_content: "",
        sale_creatcode: "",
        sale_remark: "",
        sale_duecode: "",
        sale_dealcode: "",
        sale_state: "0",
        sale_creatname: "",
        sale_duename: "",
        sale_dealname: "",
      },
      role_id:"",
      
      // 增加模态框
      adddialogFormVisible: false,
      // 增加模态框
      upddialogFormVisible: false,
      // 增加模态框
      desdialogFormVisible: false,
      // 增加模态框
      showdialogFormVisible: false,
      //客户经理绑定集合
      userList: [],
      // 进度条颜色
      customColors: [
        { color: "#f56c6c", percentage: 30 },
        { color: "#5cb87a", percentage: 70 },
        { color: "#1989fa", percentage: 100 },
      ],
    };
  },
  methods: {
    // 查询框刷新函数
    clean() {
      this.select = "";
      this.input = "";
      this.keyWord="";
      this.loadData();
    },
    // 进度条函数
    format(percentage) {
      return percentage == 100 ? "满" : `${percentage}%`;
    },
    // 数据展示函数
    loadData() {
       this.user_name = sessionStorage.getItem("user_name");
       this.role_id = sessionStorage.getItem("role_id");
     
      this.$axios
        .get("/sales", {
          params: {
            currentPage: this.currentPage,
            pageSize: this.pageSize,
            key: this.keyWord,
            sale_state: this.select,
          },
        })
        .then((res) => {
          this.pageInfo = res.data.data;
        })
        .catch((error) => {});
    },
    // 指派分配客户经理
    giveUser(item) {
      // var role_id = sessionStorage.getItem("role_id");
      // if ((role_id != 5) & (role_id != 3)) {
      //   alert("只有销售主管和测试人员才有指派权限");
      // } else {
        this.desdialogFormVisible = true;
        this.$axios
          .get("/sales/users")
          .then((res) => {
            this.userList = res.data.data;
            this.sale.sale_source = item.sale_source;
            this.sale.sale_title = item.sale_title;
            this.sale.sale_rate = item.sale_rate;
            this.sale.sale_content = item.sale_content;
            this.sale.sale_remark = item.sale_remark;
            this.sale.sale_id = item.sale_id;
            this.sale.sale_state=1;
            this.sale.sale_duecode = sessionStorage.getItem("user_code");
          })
          .catch((error) => {});
      // }
    },
    // 每行具体展示函数
    showSale(item) {
      this.showdialogFormVisible = true;
      this.sale.sale_source = "";
      this.sale.sale_title = "";
      this.sale.sale_rate = "";
      this.sale.sale_content = "";
      this.sale.sale_remark = "";
      this.sale.sale_creatname = "";
      this.sale.sale_duename = "";
      this.sale.sale_dealname = "";
      this.$axios
        .get("/sales/users")
        .then((res) => {
          this.sale.sale_source = item.sale_source;
          this.sale.sale_title = item.sale_title;
          this.sale.sale_rate = item.sale_rate;
          this.sale.sale_content = item.sale_content;
          this.sale.sale_remark = item.sale_remark;
          this.sale.sale_creatname = item.creat_user.user_name;
          this.sale.sale_duename = item.due_user.user_name;
          this.sale.sale_dealname = item.deal_user.user_name;
        })
        .catch((error) => {});
    },

    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.loadData();
      console.log(`每页 ${val} 条`);
    },

    handleCurrentChange(val) {
      this.currentPage = val;
      this.loadData();
      console.log(`当前页: ${val}`);
      //  alert(this.keyState)
    },
    // 查询框查询按钮
    search() {
      this.loadData();
    },
    selSales() {
      this.loadData();

      // this.$axios
      //   .get("/sales/state", {
      //     params: {
      //       currentPage: this.currentPage,
      //       pageSize: this.pageSize,
      //     },
      //   })
      //   .then((res) => {
      //     this.pageInfo = res.data.data;
      //   })
      //   .catch((error) => {});
    },
    // 删除绑定
    handleDelete(item) {
      if (confirm("确定删除?")) {
        this.sale.sale_creatcode = item.sale_creatcode;
        var code = sessionStorage.getItem("user_code");
        // if (this.sale.sale_creatcode != code) {
        //   this.sale.sale_creatcode = "";
        //   alert("只能删除自己创建的销售机会");
        // } else {
          var id = item.sale_id;
          this.$axios
            .delete("/sales/" + id)
            .then((res) => {
              alert(res.data.message);
              this.loadData();
            })
            .catch((error) => {});
        // }
      }
    },
    // 创建按钮
    addSale() {

      this.adddialogFormVisible = true;
      this.sale.sale_source = "";
      this.sale.sale_title = "";
      this.sale.sale_rate = "";
      this.sale.sale_content = "";
      this.sale.sale_remark = "";
      this.sale.sale_creatcode = "";
      this.sale.sale_duecode = "";
      this.sale.sale_dealcode = "";
      this.sale.sale_state = "0";
      this.sale.sale_creatcode = sessionStorage.getItem("user_code");
      this.user_name = sessionStorage.getItem("user_name");
    },
    // 创建确定
    saveSale(addForm) {
   const loading = this.$loading({
          lock: true,
          text: '正在刷新',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
        }, 500);
      // if (
      //   this.sale.sale_source == "" ||
      //   this.sale.sale_title == "" ||
      //   this.sale.sale_rate == "" ||
      //   this.sale.sale_content == "" ||
      //   this.sale.sale_remark == ""
      // ) {
      //   alert("带星号的不能为空");
      // } else if (this.sale.sale_rate < 0 || this.sale.sale_rate > 100) {
      //   alert("成功率在0~100之间");
      // } else {
      this.$refs[addForm].validate((valid) => {
        
        if (valid) {
          

          this.adddialogFormVisible = false;
         
          this.$axios
            .post("/sales", this.sale)
            .then((res) => {
              alert(res.data.message);
              this.loadData();
              this.sale.sale_source = "";
              this.sale.sale_title = "";
              this.sale.sale_rate = "";
              this.sale.sale_content = "";
              this.sale.sale_remark = "";
              this.sale.sale_creatcode = "";
              this.loadData();
            })
            .catch((error) => {});
        }else{
          console.log('error submit!!');
            return false;
        }
      });

      //  }
    },
    // 编辑绑定
    updSale(item) {
      this.sale.sale_creatcode = item.sale_creatcode;
      var code = sessionStorage.getItem("user_code");
      // if (this.sale.sale_creatcode != code) {
      //   this.sale.sale_creatcode = "";
      //   alert("只能编辑自己创建的销售机会");
      // } else {
        this.sale.sale_source = item.sale_source;
        this.sale.sale_title = item.sale_title;
        this.sale.sale_rate = item.sale_rate;
        this.sale.sale_content = item.sale_content;
        this.sale.sale_remark = item.sale_remark;
        this.sale.sale_id = item.sale_id;
        this.upddialogFormVisible = true;
      // }
    },
    // 编辑确定绑定
    saveUpdSale(updForm) {
      this.$refs[updForm].validate((valid) => {
        
        if (valid) {this.upddialogFormVisible = false;
        
        this.$axios
          .put("/sales", this.sale)
          .then((res) => {
            alert(res.data.message);
            this.sale.sale_source = "";
            this.sale.sale_title = "";
            this.sale.sale_rate = "";
            this.sale.sale_content = "";
            this.sale.sale_remark = "";
            this.sale.sale_creatcode = "";
            this.sale.sale_duecode = "";
            this.sale.sale_dealcode = "";
           
            this.loadData();
          })
          .catch((erroe) => {});
          }else{
          console.log('error submit!!');
            return false;
        }
      });

      // if ((this.sale.sale_duecode != null) & (this.sale.sale_duecode != "")) {
      //   this.sale.sale_state = "1";
      // } else {
      //   this.sale.sale_state = "0";
      // }
      // if (
      //   this.sale.sale_source == "" ||
      //   this.sale.sale_title == "" ||
      //   this.sale.sale_rate == "" ||
      //   this.sale.sale_content == "" ||
      //   this.sale.sale_remark == ""
      // ) {
      //   alert("带星号的不能为空");
      // } else if (this.sale.sale_rate < 0 || this.sale.sale_rate > 100) {
      //   alert("成功率在0~100之间");
      // } else {
        
      },
      // 指派确定
      saveDesSale(desForm) {
        this.$refs[desForm].validate((valid) => {
        
        if (valid) {
        this.desdialogFormVisible = false;
        this.$axios
          .put("/sales", this.sale)
          .then((res) => {
            alert(res.data.message);
            this.sale.sale_source = "";
            this.sale.sale_title = "";
            this.sale.sale_rate = "";
            this.sale.sale_content = "";
            this.sale.sale_remark = "";
            this.sale.sale_creatcode = "";
            this.sale.sale_duecode = "";
            this.sale.sale_dealcode = "";
            
            this.loadData();
          })
          .catch((erroe) => {});}
          else{
            console.log('error submit!!');
            return false;
          }
           });
        
      },
    
    // 制定开发计划绑定
    addDevp(item) {
      var code = sessionStorage.getItem("user_code");
      if (item.sale_dealcode != code) {
        alert("只有自己为处理人时才能执行开发计划");
      } else {
        this.$router.push("/CustomerDevelopmentPlan/" + item.sale_id);
      }
    },
    handleSelectionChange(val){

    }
  },
  mounted() {
    //this.user_code = sessionStorage.getItem("user_code")
    this.loadData();
  },
};
</script>